<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true, active}"
    pane="labelPane"
    @draw="draw">
     <slot></slot>
  </bm-overlay>
</template>

<script>
export default {
  props: [ 'position', 'active'],
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  mounted(){
      // this.$refs.customOverlay.$el.addEventListener('click',()=>{
      //     console.log(111);
      // })
      
  },
  methods: {
   overlayClick(){
       console.log(131);
   },
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
}
</script>

<style>
.sample {
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  position: absolute;
}
.sample.active {
  background: rgba(0,0,0,0.75);
  color: #fff;
}
</style>